<template>
    <el-dialog :title="$t('drag.123456-20')" :visible.sync="data.show" width="800px" @open="handleOpen" @opened="handleOpened">
        <div class="content">
            <el-table :border="false" ref="multipleTable" :data="tableData" tooltip-effect="dark" size="small " style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column :label="$t('name')" min-width="150">
                    <template slot-scope="scope">{{ scope.row.templateName }}</template>
                </el-table-column>
                <el-table-column prop="identifier" :label="$t('product.product-things-model.142341-9')" min-width="150" show-overflow-tooltip></el-table-column>
                <el-table-column :label="$t('product.product-things-model.142341-17')" align="center" prop="datatype" width="80">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.iot_data_type" :value="scope.row.datatype" />
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="medium" @click="data.show = false">{{ $t('device.instruction-parsing.830424-37') }}</el-button>
            <el-button type="primary" size="medium" @click="handleSave">{{ $t('components.Crontab.index.464657-9') }}</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { mapState } from 'vuex';
import { listModel } from '@/api/iot/model';

export default {
    name: 'FeatureSelection',
    dicts: ['iot_things_type', 'iot_data_type', 'iot_yes_no'],
    props: {
        data: {
            show: false,
        },
        type: {
            type: String,
            default: 'textDisplay1Style',
        },
    },
    computed: {
        ...mapState({
            currentproperties: (state) => state.dragEditor.currentproperties,
        }),
    },
    watch: {
        data: {
            handler() {
                this.getList();
            },
            deep: true,
        },
    },
    data() {
        return {
            tableData: [],
            mulSelectModel: [],
        };
    },
    created() {},
    methods: {
        getList() {
            this.tableData = [];
            const id = this.$route.query.id;

            const params = {
                productId: id,
                pageNum: 1,
                pageSize: 999,
            };
            //this.loading = true;
            listModel(params).then((response) => {
                let res = response.rows;
                //let specs = JSON.parse(item.specs);

                res.forEach((item) => {
                    const specs = JSON.parse(item.specs || '{}');
                    const baseData = {
                        templateId: item.modelId,
                        templateName: item.modelName,
                        isChart: item.isChart,
                        isReadonly: item.isReadonly,
                        identifier: item.identifier,
                        datatype: item.datatype,
                        icon: 'el-icon-edit',
                    };
                    switch (item.datatype) {
                        case 'string':
                            this.tableData.push({
                                ...baseData,
                                maxLength: specs.maxLength,
                            });
                            break;
                        case 'enum':
                            this.tableData.push({
                                ...baseData,
                                enumList: specs.enumList?.length ? specs.enumList : [{ value: '', text: '' }],
                            });
                            break;
                        case 'integer':
                            this.tableData.push({
                                ...baseData,
                                min: specs.min,
                                max: specs.max,
                                unit: specs.unit,
                            });
                            break;
                        case 'decimal':
                            this.tableData.push({
                                ...baseData,
                                min: specs.min,
                                max: specs.max,
                                unit: specs.unit,
                            });
                            break;
                        case 'bool':
                            this.tableData.push({
                                ...baseData,
                                trueText: specs.trueText,
                                falseText: specs.falseText,
                            });
                            break;
                    }
                });
                this.tableData = this.tableData.filter((item) => {
                    switch (this.type) {
                        case 'textDisplay1Style':
                            return item.datatype === 'string';
                        case 'btnControl1Style':
                            return item.datatype === 'bool';
                        case 'numControl1Style':
                            return (item.datatype === 'integer' || item.datatype === 'decimal') && item.isReadonly === 0 && item.isChart === 0;
                        case 'hstoricalDataGaugeStyle':
                            return item.isChart === 1;
                        case 'mulStatusControl1Style':
                            return item.datatype === 'enum';
                        case 'numDisplay1Style':
                            return (item.datatype === 'integer' || item.datatype === 'decimal') && item.isReadonly === 1 && item.isChart === 0;
                    }
                });

                // this.modelList = response.rows;
                // console.log(this.modelList);
                // this.total = response.total;
                // this.loading = false;
            });
        },
        // 打开
        handleOpen() {
            this.$nextTick(() => {
                this.$refs.multipleTable.clearSelection();
            });
        },
        handleOpened() {
            const { setConfig } = this.currentproperties;
            if (setConfig.attributes.length !== 0) {
                for (let i in this.tableData) {
                    for (let q in setConfig.attributes) {
                        if (setConfig.attributes[q]['templateId'] === this.tableData[i]['templateId']) {
                            this.$nextTick(() => {
                                this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
                            });
                        }
                    }
                }
            }
        },
        // 多选结果
        handleSelectionChange(val) {
            this.mulSelectModel = val;
        },
        // 保存
        handleSave() {
            const { setConfig } = this.currentproperties;

            setConfig.attributes = this.mulSelectModel;
            this.$nextTick(() => {
                this.data.show = false;
            });
        },
    },
};
</script>
<style scoped lang="scss">
.content {
    max-height: 500px;
    overflow: auto;
}
</style>
